<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/common.css" rel="stylesheet" />
		<style>
			body,
			.mui-content{
				height:100%;
			}
			table th,
			td {
				border: 0.1rem solid #c8c7cc;
			}
			header{
				height: 10%;
			}
			table {
				width: 100%;
				height: 90%;
				background-color: white;
				position: relative;
			}
			
			.user_info {
				width: 25%;
				height: 100%;
				position: absolute;
				left:0;
				top:0;
				box-sizing: border-box;
			}
			
			.mui-table-view .mui-media-object {
				max-width: 40%;
			}
			
			.barcode-info {
				left:0;
				box-sizing: border-box;
				position: absolute;
				height:100%;
			    width: 75%;
			    left: 25%;
			}
			
			.mui-checkbox.mui-left input[type=checkbox],
			.mui-radio.mui-left input[type=radio] {
				left: 1rem;
				top: 3.3rem;
			}
			
			.barcode-div {
				overflow: auto;
				height: 100%;
				font-size: 150%;
			}
			
			.barcode-div p{
				font-size: 70%;
				/*font-weight: bold;*/
				color: black;
			}
			
			.mui-checkbox.mui-left label,
			.mui-radio.mui-left label {
				padding: 0;
				padding-left: 5rem;
			}
			
			.li-info {
				display: inherit;
				position: relative;
				bottom: 1.2rem;
			}
			
			#scanConfirm {
				margin-bottom: 0;
				text-align: center;
				font-size: 3rem;
				line-height: 6rem;
				height:6rem;
			}
			
			.user_info .mui-table-view-cell.input-li{
				padding: 1.5rem;
			}
			
			#cancel{
				width: 90%;
    			font-size: 4rem;
				line-height: 5rem;
				height:6rem;
				margin:0.8rem auto;
			}
			
			.user_info .mui-table-view-cell {
			    padding: 2.5rem 1rem;
			}
			.tvi-backdrop {
			    /*z-index: 998;*/
			    background-color: rgb(135,206,235);
			    pointer-events: none;
			}
			.tvi-not-backdrop {
			    /*z-index: 998;*/
			    background-color: rgb(72, 205, 138);
			    pointer-events: none;
			}
			#name{
				font-size: 5rem;
    			font-weight: bold;
			}
			#count,#check{
				font-size: 3.5rem;
			}
			.bar-remark{
				font-size: 65%;
			}
			.btn-top{
			    display: inline;
			    position: relative;
			    left: 2.5rem;
			    top: 1.3rem;
			}
			.btn-top button{
				font-size: 3rem;
				line-height: 4rem;
				margin-left: 1.8rem;
				border-radius: 0.8rem;
				padding:0.5rem 1rem;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<header>
				<img class="logo" src="img/logo.png" />
				<div class="btn-top">
					<button type="button" class="mui-btn mui-btn-outlined" onclick="allSelect()">全选</button>
					<button type="button" class="mui-btn mui-btn-outlined" onclick="unSelect()">全不选</button>
					<button type="button" class="mui-btn mui-btn-outlined" onclick="reSelect()">反选</button>
				</div>
				<div class="login-user">当前登录：<span id="login-user">护士</span>
					<a href="javascript:logout();">退出</a>
				</div>
			</header>
			<table>
				<tr>
					<td class="user_info mui-text-center">
						<!--<img src="img/user.png" />-->
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" style="padding-right: 0;padding-left: 0;">总数：<span id="count">0</span>&nbsp;选中：<span id="check">0</span></li>
							<li class="mui-table-view-cell"><!--姓名：--><span id="name">姓名</span></li>
							<li class="mui-table-view-cell">性别：<span id="sex"></span></li>
							<li class="mui-table-view-cell">年龄：<span id="age"></span></li>
							<li class="mui-table-view-cell">科室：<span id="deptName"></span></li>
							<li class="mui-table-view-cell">病历号：<span id="cardNo"></span></li>
							<li class="mui-table-view-cell" id="li-state">状态：<span id="state"></span></li>
							<li class="mui-table-view-cell input-li"><input id="scanConfirm" onblur="setFocus('scanConfirm')" type="text" class="mui-input-clear" placeholder="扫码确认" autofocus="autofocus"></li>
							<button onclick="cancel()" id="cancel" type="button" class="mui-btn">返回</button>
						</ul>
					</td>
					<td class="barcode-info">
						<div class="barcode-div">
							<ul class="mui-table-view">
								
							</ul>
						</div>
					</td>
				</tr>
			</table>
		</div>
		<script src="js/JsBarcode.all.min.js"></script>
		<script src="js/common.js"></script>
		<script>
			var baseUrl = CONFIG.baseUrl;
			
			JsBarcode(".barcode-img").init();
			var barcode = '';
			var barcodeList = [];
			//条码资料
			var data = {};
			mui.plusReady(function() {
				document.getElementById('login-user').innerHTML = plus.storage.getItem('userName') + '（'+plus.storage.getItem('userCode')+'）';
				var self = plus.webview.currentWebview();
				var type = self.type;
			
				var scan = document.getElementById('scanConfirm');
				
				if(type == '1') {
					scan.placeholder = '扫码确认';
				} else {
					scan.placeholder = '扫码撤销';
				}
				//扫码确认
				scan.addEventListener('change', function() {
					if(barcode==''){
						barcode = scan.value;
						queryInfoByBarCode(barcode, type);
					}else{
						var checkbox = document.querySelectorAll('input[name="checkbox"]:checked');
						if(checkbox.length>0){
							if(type == '1') {
								confrim();
							} else {
								revoke();
							}
						}else{
							var disabled = document.querySelectorAll('input[name="checkbox"]:disabled');
							if(disabled.length==document.querySelectorAll('input[name="checkbox"]').length){
								barcode = scan.value;
								queryInfoByBarCode(barcode, type);
							}else{
								mui.toast('请选择条码',{ duration:'long', type:'div' });
								document.getElementById('scanConfirm').value = '';
							}
						}
					}
				});
			});
			function allSelect(){
				var c = document.querySelectorAll('input[name="checkbox"]');
				mui.each(c, function(i, item) {
					if(!item.disabled){
						item.checked = true;
						item.parentNode.parentNode.parentNode.style.backgroundColor = "lightyellow"
						updateCheck();
					}
				});
			}
			
			function unSelect(){
				var c = document.querySelectorAll('input[name="checkbox"]');
				mui.each(c, function(i, item) {
					if(!item.disabled){
						item.checked = false;
						item.parentNode.parentNode.parentNode.style.backgroundColor = 'inherit';
						updateCheck();
					}
				});
			}
						
			function reSelect(){
				var c = document.querySelectorAll('input[name="checkbox"]');
				mui.each(c, function(i, item) {
					if(!item.disabled){
						item.checked = !item.checked;
						item.parentNode.parentNode.parentNode.style.backgroundColor = item.checked?'lightyellow':'inherit';
						updateCheck();
					}
				});
			}
			
			
			//更新选中
			function updateCheck(ele){
				if(ele){
					if(ele.querySelectorAll('input[name="checkbox"]:checked').length == 0){
						ele.style.backgroundColor = "inherit"
					}else{
						ele.style.backgroundColor = "lightyellow";
					}
				}
				document.getElementById('check').innerHTML = document.querySelectorAll('input[name="checkbox"]:checked').length;
			}
			//确认
			function confrim() {
				var variable = [];
				var value = [];
				var scanCode = document.getElementById('scanConfirm');
				if(contains(barcodeList,scanCode.value)) {
					var checkbox = document.querySelectorAll('input[name="checkbox"]:checked');
					mui.each(checkbox, function(i, item) {
						var param = '';
						variable.push('BarCodeList');
						param = param + '<BarCode>' + data.ReturnList[item.value].PatientBarCode + '</BarCode>';
						param = param + '<ParentCode>' + data.ReturnList[item.value].BarCodeParent + '</ParentCode>';
						param = param + '<PatientSeeDate>' + data.ReturnList[item.value].PatientSeeDate + '</PatientSeeDate>';
						param = param + '<PatientNo>' + data.ReturnList[item.value].PatientNo + '</PatientNo>';
						param = param + '<OperCode>' + plus.storage.getItem('userCode') + '</OperCode>';
						param = param + '<OperName>' + plus.storage.getItem('userName') + '</OperName>';
						param = param + '<ItemCode>' + data.ReturnList[item.value].PatientItemCode + '</ItemCode>';
						param = param + '<ItemName>' + data.ReturnList[item.value].PatientItemName + '</ItemName>';
						value.push(param);
					});
					RequestByPost('ExecConfigByBarCode', variable, value, baseUrl, 'http://HIS.org/', new Array('Request'), function() {
						var result = getResult(xmlhttp.responseText, 'ExecConfigByBarCodeResult');
						if(result.ReturnVal == 1) {
							mui.toast('确认成功',{ duration:'long', type:'div' });
							var temp = barcode;
							cleanInfo();
							//再次查询
							queryInfoByBarCode(temp, '3');
							document.getElementById('check').innerHTML = 0;
							
						} else {
							mui.toast(result.ErrMsg==''?'确认失败，请重试':result.ErrMsg,{ duration:'long', type:'div' });
							cleanInfo();
						}
					});
				} else {
					mui.toast('两次扫码患者不一致',{ duration:'long', type:'div' });
					cleanInfo();
				}
			}

			//撤销
			function revoke() {
				var variable = [];
				var value = [];
				var scanCode = document.getElementById('scanConfirm');
				if(contains(barcodeList,scanCode.value)) {
					var checkbox = document.querySelectorAll('input[name="checkbox"]:checked');
					mui.each(checkbox, function(i, item) {
						var param = '';
						variable.push('BarCodeList');
						param = param + '<BarCode>' + data.ReturnList[item.value].PatientBarCode + '</BarCode>';
						param = param + '<KeyID>' + data.ReturnList[item.value].BarCodeKeyID + '</KeyID>';
						param = param + '<OperCode>' + plus.storage.getItem('userCode') + '</OperCode>';
						param = param + '<OperName>' + plus.storage.getItem('userName') + '</OperName>';
						value.push(param);
					});
					RequestByPost('ExecCancelConfigByBarCode', variable, value, baseUrl, 'http://HIS.org/', new Array('Request'), function() {
						var result = getResult(xmlhttp.responseText, 'ExecCancelConfigByBarCodeResult');
						if(result.ReturnVal == 1) {
							mui.toast('撤销成功',{ duration:'long', type:'div' });
							cleanInfo();
						} else {
							mui.toast(result.ErrMsg==''?'撤销失败，请重试':result.ErrMsg,{ duration:'long', type:'div' });
							cleanInfo();
						}
					});
				} else {
					mui.toast('两次扫码患者不一致',{ duration:'long', type:'div' });
					cleanInfo();
				}
			}
			//取消
			function cancel() {
				mui.back();
			}
			//根据条码查询患者信息以及条码信息
			function queryInfoByBarCode(code, type) {
				barcodeList = [];
				document.getElementById('scanConfirm').value = '';
				RequestByPost('QueryInfoByBarCode', new Array('BarCode','UserCode'), new Array(code,plus.storage.getItem('userCode')), baseUrl, 'http://HIS.org/', new Array('Request'), function() {
					data = getResult(xmlhttp.responseText, 'QueryInfoByBarCodeResult');
					if(data.ReturnVal == 1) {
						//患者资料
						document.getElementById('name').innerHTML = data.ReturnList[0].PatientName;
						document.getElementById('sex').innerHTML = data.ReturnList[0].PatientSex;
						document.getElementById('age').innerHTML = data.ReturnList[0].PatientAge;
						document.getElementById('deptName').innerHTML = data.ReturnList[0].PatientDeptName;
						document.getElementById('cardNo').innerHTML = data.ReturnList[0].PatientCardNo;
						document.getElementById('state').innerHTML = data.ReturnList[0].PatientState;
						if(data.ReturnList[0].PatientState.replace(/(^\s*)|(\s*$)/g, "")=='在院'){
							document.getElementById('li-state').style.backgroundColor='red';
						}else{
							document.getElementById('li-state').style.backgroundColor='';
						}
						var html = '';
						//统计条码数目
						var codeCount = 0;
						mui.each(data.ReturnList, function(i, item) {
							if(type == '1') {
								//显示没有被确认的条形码
								if(item.BarCodeKeyID == '') {
									html += createBarList(item,i);
								}else{
									html += createBarList(item,i,true,true);
								}
								barcodeList.push(item.PatientBarCode);
								codeCount++;
							} else if(type == '3'){
								//只读
								if(item.BarCodeKeyID == '') {
									html += createReadBarList(item,i);
								}else{
									html += createBarList(item,i,true,true);
								}
								barcodeList.push(item.PatientBarCode);
								codeCount++;
							} else {
								//显示已确认且可撤销的条形码
								if(item.BarType == 0) {
									if(barcode==item.PatientBarCode){
										html += createBarList(item,i);
									}else{
										html += createBarList(item,i,false);
									}
									barcodeList.push(item.PatientBarCode);
									codeCount++;
								}
							}
						});
						if(barcodeList.length>0){
							document.querySelector('.barcode-div ul').innerHTML = html;
							document.getElementById('count').innerHTML = codeCount;
							updateCheck();
							JsBarcode(".barcode-img").init();
						}else{
							mui.toast('未查询到条码信息',{ duration:'long', type:'div' });
							barcode = '';
						}
					} else {
						mui.toast('未查询到条码信息',{ duration:'long', type:'div' });
					}
				});
			}
			/**
			 * 生成条码
			 * @param {Object} item
			 * @param {Object} i
			 * @param {Object} flag
			 * @param {Object} disabled
			 */
			function createBarList(item,i,flag,disabled){
				var liClass = 'tvi-backdrop';
				//不可撤销
				if(item.BarType==1){
					liClass = 'tvi-not-backdrop';
				}
				return '<li class="mui-table-view-cell mui-media '+(disabled?liClass:'')+'" onclick="updateCheck(this)"'+(flag==false||disabled?'':'style="background-color: lightyellow;"')+'>' +
						'<a href="javascript:;">' +
						'<div class="mui-input-row mui-checkbox mui-left">' +
						'<label>' +
						'<svg class="barcode-img" jsbarcode-value="' + item.PatientBarCode + '" jsbarcode-width="2" jsbarcode-background="rgba(0,0,0,.0)" jsbarcode-height="45" jsbarcode-fontSize="25"></svg>' +
						'<div class="mui-media-body li-info">' +
						'<span class="patientSamName">' + item.PatientSamName +'</span> <span class="patientItemName">' + item.PatientItemName + '</span>' +
						'<p class="mui-ellipsis"><span class="patientCuvName">' + item.PatientCuvName + '（<span class="patientTypeName">' + item.PatientTypeName + '</span></span>）'+(item.BarRemark==''?'':'<span class="bar-remark">（'+item.BarRemark+'）</span>')+'</span></p>' +
						'</div>' +
						'</label>' +
						'<input name="checkbox" value="' + i + '" type="checkbox" '+(disabled?'disabled':'')+' '+(flag==false||disabled?'':'checked="checked"')+'>' +
						'</div>' +
						'</a>' +
						'</li>';
			}
			
			/**
			 * 生成只读条码
			 * @param {Object} item
			 * @param {Object} i
			 */
			function createReadBarList(item,i){
				return '<li class="mui-table-view-cell mui-media">' +
						'<a href="javascript:;">' +
						'<div class="mui-input-row mui-checkbox mui-left">' +
						'<label>' +
						'<svg class="barcode-img" jsbarcode-value="' + item.PatientBarCode + '" jsbarcode-width="2" jsbarcode-background="rgba(0,0,0,.0)" jsbarcode-height="45" jsbarcode-fontSize="25"></svg>' +
						'<div class="mui-media-body li-info">' +
						'<span class="patientSamName">' + item.PatientSamName +'</span> <span class="patientItemName">' + item.PatientItemName + '</span>' +
						'<p class="mui-ellipsis"><span class="patientCuvName">' + item.PatientCuvName + '（<span class="patientTypeName">' + item.PatientTypeName + '</span></span>）'+(item.BarRemark==''?'':'<span class="bar-remark">（'+item.BarRemark+'）</span>')+'</span></p>' +
						'</div>' +
						'</label>' +
						'<input name="checkbox" value="' + i + '" type="checkbox" disabled>' +
						'</div>' +
						'</a>' +
						'</li>';
			}
			
			function cleanInfo(){
				document.getElementById('name').innerHTML = '';
				document.getElementById('sex').innerHTML = '';
				document.getElementById('age').innerHTML = '';
				document.getElementById('deptName').innerHTML = '';
				document.getElementById('cardNo').innerHTML = '';
				document.getElementById('state').innerHTML = '';
				document.querySelector('.barcode-div ul').innerHTML = '';
				document.getElementById('scanConfirm').value = '';
				document.getElementById('count').innerHTML = 0;
				document.getElementById('check').innerHTML = 0;
				barcode = '';
			}
		</script>
	</body>

</html>